<template>
  <div class="toolbarContainer">
    <div class="toolbar">
      <!-- 节点操作 -->
      <div class="toolbarBlock">
        <div class="toolbar-mark" v-if="isReadOnly"></div>
        <div
          class="toolbarBtn"
          :class="{
            disabled: readonly || backEnd,
          }"
          @click="$eventBus.$emit('execCommand', 'BACK')"
        >
          <span class="icon xmind-iconfont iconhoutui-shi"></span>
          <span class="text">{{$t('message.xmindMap.back')}}</span>
        </div>
        <div
          class="toolbarBtn"
          :class="{
            disabled: readonly || forwardEnd,
          }"
          @click="$eventBus.$emit('execCommand', 'FORWARD')"
        >
          <span class="icon xmind-iconfont iconqianjin1"></span>
          <span class="text">{{$t('message.xmindMap.forward')}}</span>
        </div>
        <div
          class="toolbarBtn"
          :class="{
            disabled: activeNodes.length <= 0 || hasGeneralization,
            // active: isInPainter
          }"
          @click="$eventBus.$emit('startPainter')"
        >
          <span class="icon xmind-iconfont iconjiedian"></span>
          <span class="text">{{$t('message.xmindMap.painter')}}</span>
        </div>
        <div
          class="toolbarBtn"
          :class="{
            disabled: activeNodes.length <= 0 || hasRoot || hasGeneralization,
          }"
          @click="$eventBus.$emit('execCommand', 'INSERT_NODE')"
        >
          <span class="icon xmind-iconfont iconjiedian"></span>
          <span class="text">{{$t('message.xmindMap.insertPeerNodes')}}</span>
        </div>
        <div
          class="toolbarBtn"
          :class="{
            disabled: activeNodes.length <= 0 || hasGeneralization,
          }"
          @click="$eventBus.$emit('execCommand', 'INSERT_CHILD_NODE')"
        >
          <span class="icon xmind-iconfont icontianjiazijiedian"></span>
          <span class="text">{{$t('message.xmindMap.insertChildNode')}}</span>
        </div>
        <div
          class="toolbarBtn"
          :class="{
            disabled: activeNodes.length <= 0,
          }"
          @click="$eventBus.$emit('execCommand', 'REMOVE_NODE')"
        >
          <span class="icon xmind-iconfont iconshanchu"></span>
          <span class="text">{{$t('message.xmindMap.deleteNode')}}</span>
        </div>
        <div
          class="toolbarBtn"
          :class="{
            disabled: activeNodes.length <= 0,
          }"
          @click="$eventBus.$emit('showNodeImage')"
        >
          <span class="icon xmind-iconfont iconimage"></span>
          <span class="text">{{$t('message.xmindMap.image')}}</span>
        </div>
        <div
          class="toolbarBtn"
          :class="{
            disabled: activeNodes.length <= 0,
          }"
          @click="$eventBus.$emit('changeSidebar','nodeIconSidebar')"
        >
          <span class="icon xmind-iconfont iconxiaolian"></span>
          <span class="text">{{$t('message.xmindMap.icon')}}</span>
        </div>
        <div
          class="toolbarBtn"
          :class="{
            disabled: activeNodes.length <= 0,
          }"
          @click="$eventBus.$emit('showNodeLink')"
        >
          <span class="icon xmind-iconfont iconchaolianjie"></span>
          <span class="text">{{$t('message.text.hyperLink')}}</span>
        </div>
        <div
          class="toolbarBtn"
          :class="{
            disabled: activeNodes.length <= 0,
          }"
          @click="$eventBus.$emit('showNodeNote',false)"
        >
          <span class="icon xmind-iconfont iconflow-Mark"></span>
          <span class="text">{{$t('message.text.notes')}}</span>
        </div>
        <div
          class="toolbarBtn"
          :class="{
            disabled: activeNodes.length <= 0,
          }"
          @click="$eventBus.$emit('showNodeTag')"
        >
          <span class="icon xmind-iconfont iconbiaoqian"></span>
          <span class="text">{{$t('message.text.label')}}</span>
        </div>
        <div
          class="toolbarBtn"
          :class="{
            disabled: activeNodes.length <= 0 || hasRoot || hasGeneralization,
          }"
          @click="$eventBus.$emit('execCommand', 'ADD_GENERALIZATION')"
        >
          <span class="icon xmind-iconfont icongaikuozonglan"></span>
          <span class="text">{{$t('message.xmindMap.summary')}}</span>
        </div>
        <div
          class="toolbarBtn"
          :class="{
            disabled: activeNodes.length <= 0 || hasGeneralization
          }"
          @click="$eventBus.$emit('createAssociativeLine')"
        >
          <span class="icon xmind-iconfont iconlianjiexian"></span>
          <span class="text">{{$t('message.xmindMap.associativeLine')}}</span>
        </div>
        <div
          class="toolbarBtn"
          :class="{
            disabled: activeNodes.length <= 0 || hasGeneralization
          }"
          @click="showFormula"
        >
          <span class="icon xmind-iconfont icongongshi"></span>
          <span class="text">{{$t('message.xmindMap.formula')}}</span>
        </div>
      </div>
      <!-- 通用操作 -->
      <!-- <div class="toolbarBlock">
        <div class="toolbar-mark" v-if="isReadOnly"></div>
        <div class="toolbarBtn" @click="showOutline" :class="{
            disabled: isPrivew
          }">
          <span class="icon xmind-iconfont iconfuhao-dagangshu"></span>
          <span class="text">显示大纲</span>
        </div>
        <div class="toolbarBtn" @click="$eventBus.$emit('showBaseStyle')" :class="{
            disabled: isPrivew
          }">
          <span class="icon xmind-iconfont iconyangshi"></span>
          <span class="text">基础样式</span>
        </div>
        <div class="toolbarBtn" @click="$eventBus.$emit('showTheme')" :class="{
            disabled:isPrivew
          }">
          <span class="icon xmind-iconfont iconjingzi"></span>
          <span class="text">主题</span>
        </div>
        <div class="toolbarBtn" @click="$eventBus.$emit('showStructure')" :class="{
            disabled: isPrivew
          }">
          <span class="icon xmind-iconfont iconjiegou"></span>
          <span class="text">结构</span>
        </div>
      </div> -->
      <!-- 导出 -->
      <div class="toolbarBlock">
        <div class="toolbar-mark" v-if="isReadOnly"></div>
        <div class="toolbarBtn" @click="$eventBus.$emit('showImport')" :class="{
            disabled: isPrivew
          }">
          <span class="icon xmind-iconfont icondaoru"></span>
          <span class="text">{{$t('message.buttons.import')}}</span>
        </div>
        <div class="toolbarBtn" @click="$eventBus.$emit('showExport')" :class="{
            disabled: isPrivew
          }">
          <span class="icon xmind-iconfont iconexport"></span>
          <span class="text">{{$t('message.xmindMap.export')}}</span>
        </div>
        <!-- <div class="toolbarBtn" @click="$eventBus.$emit('showShortcutKey')" :class="{
            disabled: isPrivew
          }">
          <span class="icon xmind-iconfont iconjianpan"></span>
          <span class="text">快捷键</span>
        </div> -->
      </div>
    </div>
    <NodeImage></NodeImage>
    <NodeHyperlink></NodeHyperlink>
    <!-- <NodeIcon></NodeIcon> -->
    <NodeNote :docInfo="docInfo"></NodeNote>
    <NodeTag></NodeTag>
    <Export :name="infoData.name"></Export>
    <Import></Import>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance,
  computed
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import NodeImage from "./NodeImage.vue";
import NodeHyperlink from "./NodeHyperlink.vue";
import NodeNote from "./NodeNote.vue";
import NodeTag from "./NodeTag.vue";
import Export from "./Export.vue";
import Import from './Import.vue';
import $eventBus from "@/utils/eventBus";
import { useRouter } from "vue-router"
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({
  isReadOnly:{
    type:Boolean,
    default:false
  },
  isPrivew:{
    type:Boolean,
    default:false
  },
  infoData:{
    type:Object,
    default(){
      return {}
    }
  },
  docInfo:{
    type:Object,
    default(){
      return {}
    }
  },
})

const activeNodes = ref([])
const backEnd = ref(false)
const forwardEnd = ref(true)
const readonly = ref(false)
const isFullDataFile = ref(false)
const timer = ref(null)

const hasRoot=computed(()=>{
  return activeNodes.value.findIndex((node) => {
    return node.isRoot;
  }) !== -1;
})
const hasGeneralization = computed(()=>{
  return activeNodes.value.findIndex((node) => {
    return node.isGeneralization;
  }) !== -1;;
})

onMounted(()=>{
  proxy.$eventBus.$on("mode_change", (mode) => {
    readonly.value = mode === 'readonly'
  });
  proxy.$eventBus.$on("node_active", (...args) => {
    activeNodes.value = args[1];
  });
  proxy.$eventBus.$on("back_forward", (index, len) => {
    backEnd.value = index <= 0
    forwardEnd.value = index >= len - 1
  });
})

function showOutline(){
  proxy.$eventBus.$emit('showOutline')
}
function showFormula() {
  proxy.$eventBus.$emit('changeSidebar','formulaSidebar')
  // this.setActiveSidebar('formulaSidebar')
}
</script>
<style lang="scss" scoped>
.toolbarContainer {
  .toolbar {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    padding: 0 20px;
    padding-top: 20px;
    font-size: 12px;
    @include fontFamily;
    font-weight: 400;
    color: rgba(26, 26, 26, 0.8);
    z-index: 2;

    .toolbarBlock {
      position: relative;
      .toolbar-mark{
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 9;
        cursor: no-drop;
        width: 100%;
        height: 100%;
      }
      display: flex;
      background-color: #fff;
      padding: 10px 20px;
      border-radius: 6px;
      box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
      border: 1px solid rgba(0, 0, 0, 0.06);
      margin-right: 20px;

      &:last-of-type {
        margin-right: 0;
      }
    }

    .toolbarBtn {
      display: flex;
      justify-content: center;
      flex-direction: column;
      cursor: pointer;
      margin-right: 20px;

      &:last-of-type {
        margin-right: 0;
      }

      &:hover {
        &:not(.disabled) {
          .icon {
            background: #f5f5f5;
          }
        }
      }

      &.disabled {
        color: #bcbcbc;
        cursor: not-allowed;
        pointer-events: none;
      }

      .icon {
        display: flex;
        height: 26px;
        background: #fff;
        border-radius: 4px;
        border: 1px solid #e9e9e9;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        padding: 0 5px;
      }

      .text {
        margin-top: 3px;
      }
    }
  }
}
</style>